import {
  createRouter,
  createWebHashHistory,
  RouteRecordRaw,
} from 'vue-router';
import HomeView from '@/views/HomeView.vue';
import type { RouteLocationNormalized } from 'vue-router';

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'home',
    component: HomeView,
    meta: {
      title: 'home',
    },
  },
  {
    path: '/about',
    name: 'about',
    component: () =>
      import(
        /* webpackChunkName: "about" */ '@/views/AboutView.vue'
      ),
    meta: {
      title: 'about',
    },
  },
  {
    path: '/homemain',
    name: 'homemain',
    redirect: '/homemain/table',
    component: () =>
      import(
        /* webpackChunkName: "about" */ '@/pages/home/index.vue'
      ),
    children: [
      {
        name: 'table',
        path: 'table',
        component: () =>
          import(
            /* webpackChunkName: "about" */ '@/pages/home/table/table.vue'
          ),
        meta: {
          title: 'table',
        },
      },
      {
        name: 'list',
        path: 'list',
        component: () =>
          import(
            /* webpackChunkName: "about" */ '@/pages/home/list/list.vue'
          ),
        meta: {
          title: 'list',
        },
      },
    ],
  },
  {
    path: '/login',
    name: 'login',
    component: () =>
      import(
        /* webpackChunkName: "about" */ '@/pages/login/index.vue'
      ),
    meta: {
      title: 'login',
    },
  },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

router.beforeEach(
  (
    to: RouteLocationNormalized,
    from,
    next
  ) => {
    document.title =
      (to.meta.title as string) ??
      'test';
    next();
  }
);

export default router;
